<template>
	<view class="allMember">
		<view class="search flex alignCenter">
			<input type="text" placeholder="成员昵称" v-model.trim="nickname" placeholder-class="font14 color666" maxlength="10" @confirm="searchClick">
			<text class="font14 bold" @click="searchClick">搜索</text>
		</view>
		<view class="groupMember flex flexWrap">
			<view class="groupOne" v-for="(item,index) in member" :key="index" @click="chooseOne(item)">
				<view class="imgBox">
					<image class="logo" :src="item.createUserAvatar || 'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'" mode=""></image>
					<uni-icons class="delIcon" v-if="(preIdentity && preIdentity.userType==0 && item.userType!=0)" type="minus-filled" size="20" @click="delMember(item)"></uni-icons>
					<view class="identity font10" v-if="item.userType!=2">{{item.userType==0?'组长':'管理员'}}</view>
					<image class="choose" v-if="(item.choose)" src="@/static/image/icons/choose.png" mode="widthFix"></image>
				</view>
				<view class="font12 color666 hiddenOneline">{{item.createUserName}}</view>
			</view>
		</view>
		<view class="fixedBottomBtn" v-if="(preIdentity && preIdentity.userType==0)" @click="sure">确定</view>
	</view>
</template>

<script>
	import { groupMember,setMemberManage,operMember,delMember } from "@/api/send.js"
	export default {
		data() {
			return {
				member:[],
				page:1,
				pageSize:50,
				pageTotal:0,
				groupId:'',
				operType:'',
				chooseMember:[],
				nickname:'',
				preIdentity:''
			};
		},
		onLoad(option) {
			this.groupId=option.query?JSON.parse(option.query).id:''
			this.operType=option.query?JSON.parse(option.query).type:''
			this.preIdentity=option.query?JSON.parse(option.query).preIdentity:''
			this.getList()
		},
		onReady() {
			uni.setNavigationBarTitle({
				title:this.operType=='setCreater'?'设置群主':'设置管理员'
			})
		},
		methods:{
			initPage(){
				this.page=1;
				this.member=[]
			},
			// 获取小组成员
			getList(){
				let param={
					page:this.page,
					size:this.pageSize,
					teamId:this.groupId,
					userState:1,
					createUserName:this.nickname
				}
				groupMember(param).then((res)=>{
					if(res.code==100000){
						res.data.rows.forEach((item)=>{
							item.choose=false
						})
						this.member=res.data.rows
					}
				})
			},
			// 删除成员
			delMember(item){
				uni.showModal({
					title: '提示',
					content: '是否确定删除该组员？',
					success: (res)=> {
						if (res.confirm) {
							let param={
								teamId:this.groupId,
								createUserId:item.createUserId
							}
							delMember(param).then((res)=>{
								if(res.code==100000){
									this.searchClick()
								}
							})
						} else if (res.cancel) {}
					}
				});
			},
			// 选择小组成员
			chooseOne(item){
				// 群主才能去操作
				if(this.preIdentity && this.preIdentity.userType==0){
					if(this.operType=='setCreater'){
						if(item.userType==0){
							uni.showToast({
								title:'已经是群主了哦',
								icon:'none'
							})
							return
						}
						this.member.forEach((val)=>{
							val.choose=false
						})
						item.choose=true
						return
					}else if(this.operType=='setManage'){
						if(item.userType==0){
							uni.showToast({
								title:'群主不能设置身份成为管理员',
								icon:'none'
							})
							return
						}
						item.choose=!item.choose
						return
					}
				}
			},
			//转让小组
			changeManager(){
				
			},
			// 搜索小组成员
			searchClick(){
				this.initPage()
				this.getList()
			},
			// 确定事件
			sure(){
				this.chooseMember=this.member.filter((item)=>item.choose)
				if(this.chooseMember.length==0){
					uni.showToast({
						title:'请先选择成员',
						icon:'none'
					})
					return
				}
				let ids=[]
				this.chooseMember.forEach((item)=>{
					ids.push(item.createUserId)
				})
				let param={
					teamId:this.groupId,
					createUserIds:ids
				}
				setMemberManage(param).then((res)=>{
					if(res.code==100000){
						uni.showToast({
							title:'设置成功',
							icon:'none'
						})
						this.initPage()
						this.getList()
					}
				})
			}
		},
		onPullDownRefresh() {
			this.initPage()
			this.getList()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		onReachBottom() {
			if(this.page<this.pageTotal){
				++this.page
				this.getList()
			}else{
				uni.showToast({
					title:'我也是有底线的',
					icon:'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "@/static/public.scss";
.allMember{
	padding: 30rpx 30rpx 120rpx;
	box-sizing: border-box;
}
.search{
	margin: 0 0 30rpx;
	input{
		border:1px solid $bordercolor;
		border-radius: 30rpx;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		flex:1;
		margin:0 20rpx 0 0;
	}
}
.groupOne{
	flex:0 0 20%;
	text-align: center;
	margin:0 0 40rpx;
	.imgBox{
		position: relative;
		width: 100rpx;
		height:100rpx;
		margin:0 auto 20rpx;
		.identity{
			position: absolute;
			bottom:0;
			width:100%;
			text-align: center;
			left: 0;
			background: rgba(0, 0, 0, .4);
			border-radius: 10rpx;
			color: #fff;
		}
		.choose{
			width:80rpx;
			position: absolute;
			bottom: 0;
			right: 0;
			border-radius: 0 0 10rpx 0;
		}
	}
	.logo{
		width: 100rpx;
		height:100rpx;
		border-radius: 10rpx;
		display: block;
	}
	.delIcon{
		position: absolute;
		top:0;
		right: 0;
		color:$colorred !important;
	}
}
</style>
